<template>
	<div class="fortress-date-time-stat">
		<el-date-picker
			class="el-date-picker"
			v-model="returnValue"
			type="datetimerange"
			:start-placeholder="startPlaceholder"
			:end-placeholder="endPlaceholder"
			:range-separator="rangeSeparator"
			:readonly="readonly"
			:disabled="disabled"
			:clearable="clearable"
			:format="format"
			:size="size"
		></el-date-picker>
		<div>
			<span>共 {{ total }} 小时</span>
		</div>
	</div>
</template>

<script>
export default {
	name: "fortress-date-time-stat",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: [Array],
			default: () => [],
		},
		readonly: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		clearable: {
			type: Boolean,
			default: false,
		},
		size: {
			type: String,
		},
		startPlaceholder: {
			type: String,
			default: "开始日期",
		},
		endPlaceholder: {
			type: String,
			default: "结束日期",
		},
		rangeSeparator: {
			type: String,
			default: "至",
		},
		format: {
			type: String,
			default: "yyyy-MM-dd",
		},
	},
	data() {
		return {}
	},
	computed: {
		returnValue: {
			get() {
				return this.value || []
			},
			set(val) {
				this.$emit("update:value", val)
				this.$emit("input", val)
			},
		},
		total() {
			// 计算小时数
			const start = new Date(this.returnValue[0])
			const end = new Date(this.returnValue[1])
			if (!start || !end) return 0
			const total = (end - start) / 1000 / 60 / 60
			return total
		},
	},
	methods: {
		async getTotal() {},
	},
}
</script>

<style lang="scss" scoped>
.fortress-date-time-stat {
	.el-date-picker {
		width: 100%;
	}
}
</style>
